<template>
  <div class="flowCanvas">
    <div class="container" ref="container"></div>
    <!-- 节点面板 -->
    <BpmnNodePanel v-if="lf" :lf="lf"></BpmnNodePanel>
    <!-- 数据面板 -->
    <BpmnDataPanel v-if="lf" :lf="lf" @previewData="previewXml" @updateProcess="updateProcess"></BpmnDataPanel>
    <el-dialog title="预览" width="80%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
      <pre><code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code></pre>
    </el-dialog>
    <!-- 属性面板 -->
    <el-drawer
        :title="drawTitle"
        :visible.sync="dialogVisible"
        direction="rtl"
        size="500px"
        :before-close="closeDialog">
      <NodePropertyDialog
          v-if="dialogVisible"
          :nodeData="clickNode"
          :lf="lf"
          ref="nodePropertyDialog"
          @updateParent="updateParent"
      ></NodePropertyDialog>
    </el-drawer>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import {BpmnXmlAdapter} from "./myFlow/bpmn-adapter/bpmnAdapter.js"
import {
  BpmnElement,
  //BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect,
} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";
import BpmnNodePanel from "./myFlow/components/BpmnNodePanel.vue";
import BpmnDataPanel from "./myFlow/components/BpnmDataPanel.vue";
import NodePropertyDialog from "./myFlow/NodeSetting/NodePropertyDialog"
// 代码高亮插件
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
import MStartEvent from "./myFlow/bpmn-base/MStartEvent.js";
import MEndEvent from "./myFlow/bpmn-base/MEndEvent.js";
import MUserTask from "./myFlow/bpmn-base/MUserTask.js";
import MServiceTask from "./myFlow/bpmn-base/MServiceTask.js";
import MExclusiveGateway from "./myFlow/bpmn-base/MExclusiveGateway.js";
import MSequenceFlow from "./myFlow/bpmn-base/MSequenceFlow.js";
import { getBpmnId } from './myFlow/bpmn-adapter/bpmnIds.js';
export default {
  name: "logicflowBpmn",
  data() {
    return {
      lf: null,
      drawer: false,
      currentNode: null,
      previewModelVisible: false,
      previewResult: "",
      previewType: "xml",
      clickNode: null,
      dialogVisible: false,
      drawTitle:'设置节点属性',
      process:{
        type:'bpmn:process',
        id:'Process_'+getBpmnId(),
        name:''
      }
    };
  },
  components: { BpmnNodePanel, BpmnDataPanel,NodePropertyDialog },

  mounted() {
    LogicFlow.use(BpmnElement);
    LogicFlow.use(BpmnXmlAdapter);
    LogicFlow.use(Snapshot);
    LogicFlow.use(Control);
    LogicFlow.use(Menu);
    LogicFlow.use(SelectionSelect);
    //初始化
    this.lf = new LogicFlow({
      container: document.querySelector('.container'),
      grid: {
        size: 10,
        visible: true,
        type: "mesh",
        config: {
          color: "#ababab",
          thickness: 1,
        },
      },
      keyboard: {
        enabled: true,
      },
    });
    // 控制面板-清空画布
    this.lf.extension.control.addItem({
      iconClass: 'lf-control-clear',
      title: 'clear',
      text: '清空',
      onClick: (lf) => {
        lf.clearData()
      }
    })
    BpmnXmlAdapter.updateProcess(this.process)
    this.lf.adapterIn=BpmnXmlAdapter.adapterXmlIn
    this.lf.adapterOut = BpmnXmlAdapter.adapterXmlOut
    this.$_registerNode()
    this.lf.render();
    this.$_LfEvent()
  },

  methods: {
    $_LfEvent () {
      this.lf.on('node:click', ({data}) => {
        console.log('node:click', data)
        this.$data.clickNode = data
        this.drawTitle='设置'+data.type+'属性'
        this.$data.dialogVisible = true
      })
      this.lf.on('edge:click', ({data}) => {
        console.log('edge:click', data)
        this.$data.clickNode = data
        this.drawTitle='设置'+data.type+'属性'
        this.$data.dialogVisible = true
      })
      this.lf.on('element:click', () => {
        //this.hideAddPanel()
      })

      this.lf.on('edge:add', ({data}) => {
        console.log('edge:add', data)
      })
      this.lf.on('node:mousemove', ({data}) => {
        console.log('node:mousemove')
        console.log(data)
        //this.moveData = data
      })
      this.lf.on('blank:drag', () => {
        this.lf.off('blank:mouseup')
      })
      this.lf.on('blank:drop', () => {
        this.lf.on('blank:mouseup',() => {
          this.$data.clickNode = this.$data.process
          this.drawTitle='设置'+this.$data.process.type+'属性'
          this.$data.dialogVisible = true
        })
      })
      this.lf.on('blank:mouseup', () => {
        this.$data.clickNode = this.$data.process
        this.drawTitle='设置'+this.$data.process.type+'属性'
        this.$data.dialogVisible = true
      })
      this.lf.on('connection:not-allowed', (data) => {
        this.$message({
          type: 'error',
          message: data.msg
        })
      })
      this.lf.on('node:mousemove', () => {
        console.log('on mousemove')
      })
    },

    /** 高亮显示 */
    highlightedCode(previewType, previewResult) {
      const result = hljs.highlight(previewType, previewResult || "", true);
      return result.value || '&nbsp;';
    },
    previewXml(){
      this.previewResult = (this.$data.lf).getGraphData();
      this.previewModelVisible=true
    },
    // 自定义
    $_registerNode () {
      this.lf.register(MStartEvent)
      this.lf.register(MEndEvent)
      this.lf.register(MUserTask)
      this.lf.register(MServiceTask)
      this.lf.register(MSequenceFlow)
      this.lf.register(MExclusiveGateway)
    },
    closeDialog(done) {
      this.$refs.nodePropertyDialog.handleClose()
      this.$data.dialogVisible = false
      done()
    },
    updateParent(param){
        this.$data.process=param
        BpmnXmlAdapter.updateProcess(this.$data.process)
    },
    updateProcess(){
      this.$data.process=BpmnXmlAdapter.process
    }
  },

};
</script>

<style>
.flowCanvas {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0px;
  display: flex;
}
.flowCanvas .container {
  display: flex;
  flex-grow: 1; /*铺满剩余空间*/
  border: 3px solid #ababab;
  overflow: hidden;
}
.hljs{
  font-family: Consolas,Monaco,monospace;
}
.lf-control-clear {
  background-image:url('');
}
</style>